<!-- doc -->
<template>
  <div class="file_box">
    <div v-for="content in contentList" :key="content.id" class="file_item">
      <el-image
        style="width: 32px; height: 32px"
        :src="
          getFileType(content.fileName) == 'image'
            ? minioEndpoint_mini + content.content + '!32x32'
            : require('@/assets/img/' + getFileType(content.fileName) + '.png')
        "
        :preview-src-list="[minioEndpoint_mini + content.content]"
      />
      <div class="r_info">
        <div class="header">
          <div class="name">
            <div class="pre">{{ content.fileName.slice(0, -8) }}</div>
            <div class="next">{{ content.fileName.slice(-8) }}</div>
          </div>
          <span> {{ timeFormat(content.sendTime) }}</span>
        </div>
        <div class="bottom">
          <span
            ><span>{{ content.senderName }}</span>
            {{ formateFileSize(content.fileSize) }}</span
          >
          <div class="operate">
            <!-- <span @click="handleDownload(content)"
              ><i class="el-icon-download"></i
            ></span> -->
            <svg-icon
              @click="handleForward(content)"
              iconClass="file-forward"
            ></svg-icon>
            <svg-icon
              @click="handleDownload(content)"
              iconClass="file-download"
            ></svg-icon>
            <!-- <span>转发</span> -->
          </div>
          <template
            v-if="
              downloadProcessNum > 0 &&
              downloadProcessNum < 100 &&
              currentContent === content
            "
          >
            <el-progress
              class="process"
              :percentage="downloadProcessNum"
            ></el-progress>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { formateSize } from "@/utils/chat"
import { getFileType, MESSAGE_TYPE } from "@/utils/constant"
import { timeFormat } from "@/utils"
import { courseDownload } from "@/utils/file"
import * as math from "mathjs"
import { mathNum } from "@/utils/mathTool"
export default {
  name: "fileChatPage",
  props: {
    contentList: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      // eslint-disable-next-line no-undef
      minioEndpoint_mini,
      timeFormat,
      downloadProcessNum: 0,
      currentContent: {}
    }
  },

  methods: {
    getFileType(name) {
      const { fileType } = getFileType(name)
      return fileType
    },
    formateFileSize(size) {
      return formateSize(size)
    },
    cumputeProcess(a, b) {
      const num = math.multiply(mathNum.divide(a, b), 100).toFixed()
      return parseInt(num)
    },
    handleForward(content) {
      this.$forwardDialog.open({ ...content, type: MESSAGE_TYPE.FILE })
    },
    handleDownload(content) {
      this.downloadProcessNum = 0
      this.currentContent = content
      courseDownload(
        this.minioEndpoint_mini + content.content,
        content.fileName,
        (e) => {
          this.downloadProcessNum = this.cumputeProcess(e.loaded, e.total)
        }
      )
    }
  }
}
</script>
<style lang="less" scoped>
.file_box {
  .file_item {
    font-size: 12px;
    display: flex;
    padding: 12px 10px;
    cursor: pointer;
    .operate {
      display: none;
      font-size: 16px;
      color: #999999;
      svg {
        margin-left: 8px;
        cursor: pointer;
      }
    }
    &:hover {
      background: rgb(225, 230, 240, 0.6);
      .operate {
        display: block;
        svg:hover {
          color: #1b88ff;
        }
      }
    }
    .r_info {
      flex: 1;
      padding-left: 5px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      color: #999999;
      position: relative;
      .process {
        width: 100%;
        position: absolute;
        bottom: -12px;
      }
    }
    .header {
      display: flex;
      justify-content: space-between;
      padding-bottom: 3px;
    }

    .name {
      max-width: 90px;
      display: flex;
      overflow: hidden;
      color: #000000;
      flex: 1;
      .pre {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .next {
        white-space: nowrap;
      }
    }
    .bottom {
      display: flex;
      justify-content: space-between;
      line-height: 16px;
    }
  }
}
</style>
